<template>
  <div class="fan-container">
    <el-card class="fan-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-tabs type="card">
        <el-tab-pane label="粉丝列表">
          <div class="fans-list">
            <div class="fans-item" v-for="item in fansList" :key="item.name">
              <el-avatar :src="item.photo" style="width: 80px;height: 80px;"></el-avatar>
              <p>
                {{item.name}}
              </p>
              <el-button type="primary" size="small">+关注</el-button>
            </div>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="searchForm.page" :page-sizes="[20, 30, 40]" :page-size="searchForm.per_page"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像">
          啊啊
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
  import {
    getAllFansInfo
  } from '@/api/fan.js'
  export default {
    name: 'Fan',
    data() {
      return {
        fansList: [],
        searchForm: {
          page: 1,
          per_page: 20
        },
        total: 0
      }
    },
    created() {
      this.getAllFansInfo()
    },
    methods: {
      getAllFansInfo() {
        getAllFansInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.fansList = results
          this.total = total_count
        })
      },
      handleSizeChange(val) {
        this.searchForm.per_page = val
        this.searchForm.page = 1
        getAllFansInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.fansList = results
          this.total = total_count
        })
      },
      handleCurrentChange(val) {
        this.searchForm.page = val
        getAllFansInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.fansList = results
          this.total = total_count
        })
      }
    }
  }

</script>
<style lang="less" scoped>
  .fan-card {
    margin: 15px;
  }

  .fans-item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding: 10px 0;
    display: inline-block;
    margin-right: 50px;
    margin-bottom: 15px;
  }

</style>
